<template>
  <a-card size="small" :title="group.groupTxt">
    <template #extra>
      <a-dropdown>
        <slot name="overlay">
          <a-menu>
            <template v-for="(chart, index) in group.charts" :key="index">
              <a-menu-item @click="handleMenuClick(chart.head.id)">{{ chart.head.name }}</a-menu-item>
            </template>
          </a-menu>
        </slot>
        <a-button type="primary" size="small" class="ant-btn-background-ghost" ignore-print="true" @click="details(chart.head.id)"
          >详情<a-icon type="down"
        /></a-button>
      </a-dropdown>
    </template>
    <bar-and-line :barFields="barFields" :lineFields="lineFields" :dataSource="dataSouce" :aliases="aliases" />
  </a-card>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import BarAndLine from '/@/components/chart/BarAndLine.vue';
  import { useRouter } from 'vue-router';

  export default defineComponent({
    name: 'GroupTemplateCombination',
    components: {
      BarAndLine,
    },
    props: {
      group: {
        type: Object,
        default: () => ({}),
      },
      head: {
        type: Object,
        default: () => ({}),
      },
    },
    setup(props, { emit }) {
      const barType = ref('');
      const barFields = ref([]);
      const lineFields = ref([]);
      const dataSouce = ref([]);
      const aliases = ref([]); // [{field:'name',alias:'姓名'}, {field:'sex',alias:'性别'}]
      const router = useRouter();

      getDataSource();

      function getDataSource() {
        dataSouce.value = [];
        props.group.charts.forEach((chart, i) => {
          const groupFields = chart.head.groupField.split(',');
          if (chart.head.graphType === 'line') {
            groupFields.forEach((groupField) => {
              lineFields.push(groupField + 'line' + i);
              setAliases(chart.items, groupField, 'line' + i);
            });
            setChartData(chart, 'line' + i, dataSouce);
          } else if (chart.head.graphType === 'bar') {
            groupFields.forEach((groupField) => {
              barFields.push(groupField + 'bar' + i);
              setAliases(chart.items, groupField, 'bar' + i);
            });
            setChartData(chart, 'bar' + i, dataSouce);
          }
        });
      }
      // 把多个图表的数据组合到一个数组里 [{step1bar0: 1234,step1line1: 100,stepbar0: 100,stepline1: 1234,type: "星期一"}]
      // key值上拼接line和索引  是为了key值防止重复
      function setChartData(chart, type, dataSouce) {
        var datas;
        if (chart.head.dataType === 'json' && chart.head.cgrSql) {
          datas = JSON.parse(data.head.cgrSql.replace(/↵/g, ''));
        } else if ((chart.head.dataType === 'sql' || chart.head.dataType === 'bean') && chart.head.aggregate === true) {
          datas = chart.data.aggregate;
        } else if ((chart.head.dataType === 'sql' || chart.head.dataType === 'bean') && chart.head.aggregate === false) {
          datas = chart.data.data;
        }
        const xaxisField = chart.head.xaxisField;
        if (dataSouce.length <= 0) {
          datas.forEach((item, i) => {
            var data = {
              type: item[xaxisField],
            };
            const groupFields = chart.head.groupField.split(',');
            groupFields.forEach((groupField) => {
              data[groupField + type] = item[groupField];
            });
            dataSouce.push(data);
          });
        } else {
          datas.forEach((item, i) => {
            if (i > dataSouce.length) {
              const obj = {
                type: item[xaxisField],
              };
              dataSouce.push(obj);
            } else {
              const groupFields = chart.head.groupField.split(',');
              groupFields.forEach((groupField) => {
                dataSouce[i][groupField + type] = item[groupField];
              });
            }
          });
        }
      }
      function setAliases(items, groupField, key) {
        items.forEach((data) => {
          if (data.fieldName === groupField) {
            aliases.push({
              field: groupField + key,
              alias: data.fieldTxt,
            });
          }
        });
      }
      function handleLineClick(msg) {
        if (props.head.extendJs) {
          chartClick('line', msg);
        }
      }
      function chartClick(type, msg) {
        var onClick = {};
        eval(props.head.extendJs);
        if (onClick && onClick[type]) {
          onClick[type].call(msg);
        }
      }
      function handleMenuClick(id) {
        router.push({ path: '/online/graphreport/chart/' + id });
      }

      return { barType, barFields, lineFields, dataSouce, aliases, handleMenuClick, handleLineClick };
    },
  });
</script>
<style scoped></style>
